<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@include file="/pageRc/common/common.jsp"%>

<!DOCTYPE html>
<html lang="en" style="overflow-x: hidden">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<meta name="format-detection" content="telephone=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no">
<script type="text/javascript"
	src="<%=commonPath%>/pageRc/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
	src="<%=commonPath%>/pageRc/js/jweixin-1.2.0.js"></script>
<title>需求评价</title>

<style>
.wrapper {
	width: 300px;
	margin: 10px auto;
	font: 14px/1.5 arial;
}
/*tab*/
.star {
	overflow: hidden;
}

.star li {
	float: left;
	width: 20px;
	height: 20px;
	margin: 8px;
	display: inline;
	color: #999;
	font: bold 18px arial;
	cursor: pointer
}

.star .act {
	color: #c00
}

</style>
</head>
<body>
	<table align="center"
		style="font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; border-width: 1px; border-color: #666666; border-collapse: collapse;">
		<tr>
			<th colspan="8"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;">需求评价</th>
		</tr>
		<tr>
			<th colspan="2"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;">需求编号</th>
			<th colspan="2"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;">项目组名称</th>
			<th colspan="2"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;">需求名称</th>
			<th colspan="2"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;">操作</th>
		</tr>
		<c:forEach items="${comList}" var="com">
			<tr>
				<td colspan="2"
					style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff;">${com.needNo}</td>
				<td colspan="2"
					style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff;">${com.proTeamName}</td>
				<td colspan="2"
					style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff;">${com.needName}</td>
				<td colspan="2"
					style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff;">
					<div class="wrapper">
						<ul class="star">
							<li>★</li>
							<li>★</li>
							<li>★</li>
							<li>★</li>
							<li>★</li>
						</ul>
					</div>
					<input type="hidden" class="rank"><input type="hidden" value="${com.rouid}" class="rouid">
				</td>
			</tr>
		</c:forEach>
		<tr>
		<th colspan="2"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;">
					评价：
				</th>
			<td colspan="6"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;">
					<textarea rows="5" cols="90" id="desc"></textarea>
				</td>
		</tr>
		<tr>
			<th colspan="8"
				style="border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede;"><input id="sub" type="button" value="提交"></th>
		</tr>
	</table>

</body>
<script>
		$(function(){
			$(".star li").click(function(){
				var $td = $(this).parent(".star").parent(".wrapper").parent("td");
				var cliIndex = $(this).index();
				$td.find("li").removeClass("act");
				$td.find("li").each(function(index,obj){
					if(index <= cliIndex){
						$(this).addClass("act");
					}
				})
				$td.find(".rank").val(cliIndex);
			})
			
			$("#sub").click(function(){
				var arr = new Array();
				var desc = $("#desc").val();
				$(".star").each(function(index,obj){
					var obj = Object();
					var $td = $(this).parent(".wrapper").parent("td");
					obj.rouid = $td.find(".rouid").val();
					obj.rank = $td.find(".rank").val();
					obj.commentDesc = desc;
					if(obj.rank == undefined || obj.rank == ""){
						alert("请全部评分完毕！");
						arr = new Array();
						return false;
					}
					arr.push(obj);
				})
				console.info(JSON.stringify(arr));
				$.ajax({
					url:"../../page/main/updateBatchByRouid.do",
					data:JSON.stringify(arr),
					contentType:"application/json",
					type:"post",
					dataType:"json",
					success:function(data){
						if(data.status == "success"){
							$("body").html("<h4>感谢您的评价，我们将更努力的为您们提供更优质的服务</h4>");
						}else{
							alert("评分失败，请联系管理员");
						}
					}
				})
			})
		})
</script>
</html>